<template>
	<el-card class="box-card" style="height: 100%">
		<template #header>
			<div class="card-header">
				<span>通知公告</span>
			</div>
		</template>
		<div v-for="item in state.dataList" :key="item">
			<el-link @click="formDialogRef.openDialog(item.id)">{{ item.title }}</el-link>
		</div>
		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</el-card>

	<!-- 通知公告详情弹窗  -->
	<form-dialog ref="formDialogRef" />
</template>

<script setup lang="ts" name="SysLogDashboard">
import { BasicTableProps, useTable } from '@/hooks/table';
import { pageList } from '@/api/admin/announcement';

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./web-form.vue'));

// 定义变量内容
const formDialogRef = ref();
const getList = () => {
	pageList({
		current: state.pagination?.current,
		size: state.pagination?.size,
	})
		.then((res: any) => {
			state.dataList = res.data.records;
			state.pagination.total = res.data.total;
			console.log(res, 'res');
		})
		.finally(() => {});
};
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: getList,
});
const router = useRouter();
//  table hook
const { currentChangeHandle, sizeChangeHandle } = useTable(state);
</script>

<style scoped lang="scss">
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
